<template>
    <div>
        <div class="w1080 mattop" >
        <div class="crumbs">
            The location of the: <router-link to="/index/index2">index</router-link> > <router-link to="/index/smartwatch2">smartwatch</router-link> >  <a href="#">{{skumodes.model}}</a>
        </div>
        <div class="product-intro clearfix">
            <div class="preview-wrap">
                <div class="preview">
                    <div class="main-img" ref="target">
                            <img :src="'http://www.kymid.com/testphp/public/' + skumodes.image " alt="">
                            <div class="magnifying">
                                <img src="@/assets/img/magnifying.png" alt="">
                            </div>
                            <div class="mask" ref="make"></div>
                        <div class="zoomdiv" ref="bigimg">
                            <img :src="'http://www.kymid.com/testphp/public/' + skumodes.image " alt="" class="bigimg">
                        </div>
                    </div>
                    <div class="spec-list">
                        <div class="specLeft">
                            <img src="@/assets/img/spec-left.png" alt="">
                        </div>
                        <ul>
                            <li v-for="(val,i) in skumodes.icon_path" :key="val.id" :class="[i === thits ? 'list-active' : '']" @click="indt(i)">
                                <img :src="'http://www.kymid.com/testphp/public/' + val.image " alt="" v-if="i === 0">
                            </li>
                            <!-- <li><img src="@/assets/img/G9-2.jpg" alt=""></li>
                            <li class="list-active"><img src="@/assets/img/G9-3.jpg" alt=""></li>
                            <li><img src="@/assets/img/G9-4.jpg" alt=""></li>
                            <li><img src="@/assets/img/G9-5.jpg" alt=""></li>
                            <li><img src="@/assets/img/G9-6.jpg" alt=""></li> -->
                        </ul>
                        <div class="specRight">
                            <img src="@/assets/img/spec-right.png" alt="">
                        </div>
                    </div>
                    <div class="share">
                        分享:
                        <img src="@/assets/img/Facebook.png" alt="">
                        <img src="@/assets/img/Path.png" alt="">
                        <img src="@/assets/img/Twitter.png" alt="">
                        <img src="@/assets/img/mailbox.png" alt="">
                    </div>
                </div>
            </div>
            <div class="itemInfo-wrap">
                <!-- <h3>智能手表{{skumodes.model}}</h3> -->
                <h3>{{skumodes.name_en}}</h3>
                <h5>{{skumodes.name_ch}}</h5>
                <p class="summarize">
                    {{skumodes.synopsis}}
                </p>
                <div class="watch-size clearfix">
                    <div class="option">Case size :</div>
                    <div class="parameter">
                        42mm
                        <img src="@/assets/img/act.png" alt="" class="pitch">
                    </div>
                </div>
                <div class="battery-capacity clearfix">
                    <div class="option">battery capacity :</div>
                    <div class="parameter">
                        380mAh
                        <img src="@/assets/img/act.png" alt="" class="pitch">
                    </div>
                </div>
                <div class="choose-color clearfix">
                    <div class="option">color can be selected :</div>
                    <ul>
                        <li v-for="(val,i) in skumodes.icon_path" :class="[i === thits1 ? 'act' : '']" :key="val.id" @click="qihuan3(i)">
                            <img :src="'http://www.kymid.com/testphp/public/' + val.image" alt="">
                            <img :src="i === thits1 ? '' : '' " alt="" class="pitch">
                        </li>
                        <!-- <li class="act">
                            <img src="@/assets/img/G9-3.jpg" alt="">
                            <img src="@/assets/img/act.png" alt="" class="pitch">
                        </li>
                        <li>
                            <img src="@/assets/img/G9-6.jpg" alt="">
                            <img src="" alt="" class="pitch">
                        </li>
                        <li>
                            <img src="@/assets/img/G9-9.jpg" alt="">
                            <img src="" alt="" class="pitch">
                        </li>
                        <li>
                            <img src="@/assets/img/G9-9.jpg" alt="">
                            <img src="" alt="" class="pitch">
                        </li>
                        <li>
                            <img src="@/assets/img/G9-9.jpg" alt="">
                            <img src="" alt="" class="pitch">
                        </li> -->
                    </ul>
                </div>
                <div class="support-version">
                    Support for mobile version ：IOS8.0 and Android 4.4 above
                </div>
                <div class="itemInfo-button">
                    <div>contact us</div>
                    <div>view details</div>
                </div>
            </div>
            <div class="track">
                <p>-----Guess you like-----</p>
                <ul>
                    <li v-for="val in list3" :key="val.id" @click="qiehuan(val.id)">
                        <img :src="'http://www.kymid.com/testphp/public/' + val.image" alt="">
                        <p>{{val.model}}</p>
                    </li>
                </ul>
                <div class="page-turning">
                    <div @click="cart">
                        <img src="@/assets/img/todown.png" alt="">
                    </div>
                    <div @click="subtract">
                        <img src="@/assets/img/toup.png" alt="">
                    </div>
                </div>
            </div>
        </div>
         <div class="recommend">
            <div class="recommends">
                <span></span>
                Hot style to recommend
            </div>
            <div class="rec-list">
                <ul>
                   <li v-for="val in conlist2s" :key="val.id" @click="qiehuan(val.id)">
                        <img :src="'http://www.kymid.com/testphp/public/' + val.image" alt="">
                        <p>{{val.model}}</p>
                        <p><span>HOT</span></p>
                    </li>
                </ul>
                <div><router-link to="/index/smartwatch">view more</router-link></div>
            </div>
        </div>
       <div class="product">
            <div class="product-class">
                <div class="product-title">
                    <p><!-- <img src="" alt=""> --><img src="@/assets/img/close.png" alt="" class="img-ico"> 产品分类</p>
                </div>
                <div class="classify">
                    <div class="watches">
                            <dl v-for="val in product" :key="val.id" >
                                <dt @click="toggle(val.id)">
                                    <img src="@/assets/img/close.png" alt="" class="img-ico" v-if="val.id !== valsid || !validflage">
                                    <img src="@/assets/img/open.png" alt="" class="img-ico" v-else>
                                    {{val.name}}
                                </dt>
                                <div ref="productdom" :class="val.id === valsid ? 'activeicon' : '' " v-if="validflage">
                                    <div v-if="valsid === ids1">
                                    <dd v-for="vals in conlist1" :key="vals.id"  @click="qiehuan(vals.id)">
                                    <img :src="'http://www.kymid.com/testphp/public/' + vals.image" alt="">
                                    <p>{{vals.name_en}}</p>
                                </dd>
                                </div>
                                <div v-else-if="valsid === ids2">
                                    <dd v-for="vals in conlist2" :key="vals.id" @click="qiehuan(vals.id)">
                                    <img :src="'http://www.kymid.com/testphp/public/' + vals.image" alt="">
                                    <p>{{vals.name_en}}</p>
                                </dd>
                                </div>
                                <div  v-else-if="valsid === ids3">
                                    <dd v-for="vals in conlist3" :key="vals.id"  @click="qiehuan(vals.id)">
                                    <img :src="'http://www.kymid.com/testphp/public/' + vals.image" alt="">
                                    <p>{{vals.name_en}}</p>
                                </dd>
                                </div>
                                <div  v-else-if="valsid === ids4" @click="qiehuan(vals.id)">
                                    <dd v-for="vals in conlist4" :key="vals.id">
                                    <img :src="'http://www.kymid.com/testphp/public/' + vals.image" alt="">
                                    <p>{{vals.name_en}}</p>
                                </dd>
                                </div>
                                <div>
                                    <router-link to="/index/smartwatch">view more >></router-link>
                                </div>
                                </div>
                            </dl>
                            <!-- <dl>
                                <dt><img src="@/assets/img/close.png" alt="" class="img-ico"> 新品上市</dt>
                            </dl>
                            <dl>
                                <dt><img src="@/assets/img/close.png" alt="" class="img-ico"> 最畅销品</dt>
                            </dl>
                            <dl>
                                <dt>
                                    <img src="@/assets/img/close.png" alt="" class="img-ico"> 蓝牙手表
                                </dt>
                            </dl>
                            <dl>
                                <dt><img src="@/assets/img/open.png" alt=""  class="img-ico"> 通话手表</dt>
                                <dd>
                                    <img src="@/assets/img/i7-14.jpg" alt="">
                                    <p>Smart Watch K30</p>
                                </dd>
                                <dd>
                                    <img src="@/assets/img/i7-14.jpg" alt="">
                                    <p>Smart Watch K30</p>
                                </dd>
                                <dd>
                                    <img src="@/assets/img/i7-14.jpg" alt="">
                                    <p>Smart Watch K30</p>
                                </dd>
                                <dd>
                                    <img src="@/assets/img/i7-14.jpg" alt="">
                                    <p>Smart Watch K30</p>
                                </dd>
                                <dd>
                                    view more&gt;&gt;
                                </dd>
                            </dl> -->
                    </div>
                </div>
            </div>
            <div class="product-img">
                <div class="particulars">
                    <div class="particulars-title">
                        <span></span>
                        产品详情
                    </div>
                    <div class="particulars-parameter">
                        <p>产品参数:</p>
                        <div>
                            <div>
                                <p>型号: {{skumodes.model}}</p>
                                <p>表带材质: {{skumodes.material}}</p>
                                <p>显示屏: {{skumodes.display}}</p>
                                <p>防水级别: {{skumodes.waterproof}}</p>
                                <p>电池容量: {{skumodes.battery}}</p>
                            </div>
                            <div>
                                <p>CPU: Realtek 8762C</p>
                                <p>表带宽度: {{skumodes.width}} </p>
                                <p>屏幕尺寸: {{skumodes.size}}</p>
                                <p>充电方式: {{skumodes.charging_mode}}</p>
                                <p>使用时间: {{skumodes.usage}}</p>
                            </div>
                            <div>
                                <p>重量: {{skumodes.weight}} </p>
                                <p>中框材质: {{skumodes.material_quality}}</p>
                                <p>屏幕分辨率: {{resolving_power}}</p>
                                <p>通话方式: {{call_mode}}</p>
                                <p>待机时间: {{standbys}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</template>
<style scoped>
@import url('../assets/css/particulars.css');
</style>
<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
const { proxy } = getCurrentInstance()
const target = ref(null)
const make = ref(null)
const bigimg = ref(null)
const store = useStore()
const headerid = ref(null)
// console.log(bigimg.value.children[0])
onMounted(() => {
    headerid.value = store.state.id
  classification()
  xianqing()
  lists()
  lists3()
    target.value.addEventListener('mouseover', function (e) {
        // console.log(make.value)
        make.value.style.display = 'block'
        bigimg.value.style.display = 'block'
    })
    target.value.addEventListener('mouseout', function (e) {
        make.value.style.display = 'none'
        bigimg.value.style.display = 'none'
    })
    target.value.addEventListener('mousemove', function (e) {
        // console.log(this.offsetWidth)
        var zuidaX = this.offsetWidth - make.value.offsetWidth
        var zuidaY = this.offsetHeight - make.value.offsetHeight
        // console.log(e.pageX, e.pageY, this.offsetLeft, this.offsetTop)
        var moveX = e.pageX - this.offsetLeft
        var moveY = e.pageY - this.offsetTop
        // console.log(moveX)
        // console.log(this.offsetLeft)
        moveX = moveX - make.value.offsetWidth / 2
        moveY = moveY - make.value.offsetHeight / 2
        // console.log(moveX)
        // console.log(zuidaX, zuidaY, this.offsetWidth, this.offsetHeight, make.value.offsetWidth, make.value.offsetHeight, moveX, moveY)
        if (moveX > zuidaX) {
            moveX = zuidaX
        } else if (moveX < 0) {
            moveX = 0
        }
        if (moveY > zuidaY) {
            moveY = zuidaY
        } else if (moveY < 0) {
            moveY = 0
        }
        make.value.style.left = moveX + 'px'
        make.value.style.top = moveY + 'px'
        var bgX = bigimg.value.children[0].offsetWidth - bigimg.value.offsetWidth
        var bgY = bigimg.value.children[0].offsetHeight - bigimg.value.offsetHeight
        var bilix = bgX / zuidaX
        var biliy = bgY / zuidaY
        bigimg.value.children[0].style.left = -moveX * bilix + 'px'
        bigimg.value.children[0].style.top = -moveY * biliy + 'px'
    })
})
const list = ref([])
async function lists () {
    const { data: res } = await proxy.$http.get('good_list?lang=en')
if (res.code !== 1) {
     proxy.$ElMessage({
    showClose: true,
    message: '请求失败',
    type: 'error'
  })
// return false
 } else {
    console.log(res.msg)
    list.value = res.msg
 }
}

console.log(headerid)
// 页面渲染
const skumodes = ref([])
async function xianqing () {
    const { data: headid } = await proxy.$http.get('good_find?lang=en&goods_id=' + headerid.value)
    // const { data: headid } = await proxy.$http.get('good_find?goods_id=11')
if (headid.code !== 1) {
     proxy.$ElMessage({
    showClose: true,
    message: '请求失败',
    type: 'error'
  })
// return false
 } else {
    // console.log(12121212121)
    skumodes.value = headid.msg
    console.log(skumodes)
 }
}
function qiehuan (id) {
    // console.log(id, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
    headerid.value = id
    xianqing()
}

const thits = ref(0)
const thits1 = ref(0)
// console.log(thits)
function indt (index) {
    thits.value = index
    // console.log(index)
}
function qihuan3 (index) {
    thits1.value = index
}
const list3 = ref([])
const pages = ref(1)
// console.log(pages)
async function lists3 () {
    const { data: headid1 } = await proxy.$http.get('good_like?lang=en&page=' + pages.value)
// const { data: headid } = await proxy.$http.get('good_like?page=1')
// console.log(headid1)
if (headid1.code === 1) {
     proxy.$ElMessage({
    showClose: true,
    message: '请求失败',
    type: 'error'
  })
// return false
 } else {
    // console.log(headid1.row)
    list3.value = headid1.row
    // console.log(list3.value)
    // list.value = res.msg
 }
}
function cart () {
    if (pages.value > 1) {
        pages.value--
        console.log(pages, 222222)
        lists3()
    }
}
function subtract () {
    if (pages.value < 3) {
        pages.value++
        console.log(pages, 111111111111)
        lists3()
    }
}
// 产品分类
const ids1 = ref(null)
const ids2 = ref(null)
const ids3 = ref(null)
const ids4 = ref(null)
const conlist1 = ref([])
const conlist2 = ref([])
const conlist2s = ref([])
const conlist3 = ref([])
const conlist4 = ref([])
const product = ref([])
async function classification () {
    const { data: tion } = await proxy.$http.get('type_list?lang=en')
// const { data: headid } = await proxy.$http.get('good_like?page=1')
// console.log(headid1)
if (tion.code !== 1) {
     proxy.$ElMessage({
    showClose: true,
    message: '请求失败',
    type: 'error'
  })
// return false
 } else {
    // console.log(tion)
    product.value = tion.msg[1].children1
    product.value.forEach(val => {
        console.log(val.id)
        if (ids1.value === null) {
            ids1.value = val.id
            proxy.$http.get('good_type?lang=en&product_id=' + ids1.value + '&offset=0&limit=4').then(val => {
                conlist1.value = val.data.msg
                console.log(conlist1)
            })
            // conlist1.value = tion.msg
        } else if (ids2.value === null) {
            ids2.value = val.id
            proxy.$http.get('good_type?lang=en&product_id=' + ids2.value + '&offset=0&limit=4').then(val => {
                conlist2.value = val.data.msg
                console.log(conlist2)
            })
            proxy.$http.get('good_type?product_id=' + ids2.value + '&offset=0&limit=5').then(val => {
                conlist2s.value = val.data.msg
            })
        } else if (ids3.value === null) {
            ids3.value = val.id
            proxy.$http.get('good_type?lang=en&product_id=' + ids3.value + '&offset=0&limit=4').then(val => {
                conlist3.value = val.data.msg
                console.log(conlist3)
            })
        } else if (ids4.value === null) {
            ids4.value = val.id
            proxy.$http.get('good_type?lang=en&product_id=' + ids4.value + '&offset=0&limit=4').then(val => {
                conlist4.value = val.data.msg
            })
        }
    })
    console.log(ids1, ids2)
    // list.value = res.msg
 }
}
const valsid = ref(null)
const validflage = ref(false)
const flage1 = ref(1)
// const productdom = ref(null)
function toggle (id) {
    if (valsid.value === id) {
        validflage.value = false
        flage1.value++
        if (flage1.value === 3) {
            validflage.value = true
            flage1.value = 1
        }
    } else {
        console.log(222222)
        // proxy.$refs.productdom.style.display = 'none'
        validflage.value = true
        flage1.value = 1
    }
    valsid.value = id
}
console.log(conlist2)
</script>
